<!--
=========================================================
* Material Dashboard 2 - v3.0.0
=========================================================

* Product Page: https://www.creative-tim.com/product/material-dashboard
* Copyright 2021 Creative Tim (https://www.creative-tim.com)
* Licensed under MIT (https://www.creative-tim.com/license)
* Coded by Creative Tim

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="apple-touch-icon" sizes="76x76" href="/static/image/logo.png">
  <link rel="icon" type="image/png" href="/static/image/logo.png">
  <title>
    OLD ! Welcome
  </title>
  <!--     Fonts and icons     -->
  <link rel="stylesheet" type="text/css"
    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900|Roboto+Slab:400,700" />
  <!-- Nucleo Icons -->
  <link href="/static/assets/css/nucleo-icons.css" rel="stylesheet" />
  <link href="/static/assets/css/nucleo-svg.css" rel="stylesheet" />
  <!-- Font Awesome Icons -->
  <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script>
  <!-- Material Icons -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
  <!-- CSS Files -->
  <link id="pagestyle" href="/static/assets/css/material-dashboard.css?v=3.0.0" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="/static/assets/css/ele-index.css">
  <link rel="stylesheet" type="text/css" href="/static/my_icon/iconfont.css">
</head>

<body class="bg-gray-200">
  <div id="app">
    <div class="container position-sticky z-index-sticky top-0">
      <div class="row">
        <div class="col-12">
          <!-- Navbar -->
          <nav
            class="navbar navbar-expand-lg blur border-radius-lg top-0 z-index-3 shadow position-absolute mt-4 py-2 start-0 end-0 mx-4">
            <div class="container-fluid ps-2 pe-0">

              <a class="navbar-brand font-weight-bolder ms-lg-0 ms-3 " href="../pages/homePage.html">
                <i class="ni ni-bold-left"></i>
                主页
              </a>
              <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse"
                data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon mt-2">
                  <span class="navbar-toggler-bar bar1"></span>
                  <span class="navbar-toggler-bar bar2"></span>
                  <span class="navbar-toggler-bar bar3"></span>
                </span>
              </button>
              <div class="collapse navbar-collapse" id="navigation">
                <ul class="navbar-nav mx-auto">
                  <li class="nav-item">
                    <a class="nav-link d-flex align-items-center me-2 active" aria-current="page" href="#"
                      id="show_title">
                      HELLO
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>
          <!-- End Navbar -->
        </div>
      </div>
    </div>
    <main class="main-content  mt-0">
      <div class="page-header align-items-start min-vh-100"
        style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201903%2F30%2F20190330192531_jKAKG.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638686839&t=b4a86723bee3929f6ce7dbc259d3cf07');">
        <span class="mask bg-gradient-dark opacity-6"></span>
        <div class="container my-auto">
          <div class="row">
            <div class="col-lg-4 col-md-8 col-12 mx-auto">
              <div class="card z-index-0 fadeIn3 fadeInBottom">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                  <div class="shadow-primary border-radius-lg py-3 pe-1" style="background: linear-gradient(45deg, #080000ad, transparent);">
                    <h4 class="text-white font-weight-bolder text-center mt-2 mb-0">W e l c o m e</h4>
                    <div class="row mt-3">
                    </div>
                  </div>
                </div>
                <div class="card-body" v-loading="loading">
                  <form role="form" class="text-start">
                    <div class="input-group input-group-outline my-3">
                      <label class="form-label">Email/邮箱</label>
                      <input type="email" class="form-control" v-model="email" @input="inputCheck">
                      <i class="el-icon-queding" style="position: absolute; right: 5px;top: 12px;" v-if="email_status===true"></i>
                      <i class="el-icon-shibai" style="position: absolute; right: 5px;top: 12px;" v-if="email_status!==true"></i>
                    </div>
                    <div class="input-group input-group-outline mb-3">
                      <label class="form-label">Password/密码</label>
                      <input type="password" class="form-control" v-model="password" @keyup.enter="mini_login"
                        @input="inputCheck">
                        <i class="el-icon-queding" style="position: absolute; right: 5px;top: 12px;" v-if="password_status===true"></i>
                        <i class="el-icon-shibai" style="position: absolute; right: 5px;top: 12px;" v-if="password_status!==true"></i>
                    </div>
                    <div class="form-check form-switch d-flex align-items-center mb-3">
                      <input class="form-check-input" type="checkbox" id="rememberMe" v-model="rememberMe">
                      <label class="form-check-label mb-0 ms-2" for="rememberMe" >记住我</label>
                    </div>
                    <div class="text-center">
                      <button type="button" class="btn btn-dark w-100 my-4 mb-2" id="login"
                        @click="mini_login">登录</button>
                    </div>
                    <p class="mt-4 text-sm text-center">
                      没有账号?
                      <a href="/pages/sign-up.html" class="text-primary text-gradient font-weight-bold">注册</a>
                    </p>
                    <el-dialog v-loading="loading" :title="cache_text" :visible.sync="dialogVisible" width="80%"
                      show-close=false close-on-press-escape="true" close-on-click-modal="false"
                      :before-close="handleClose"
                      style="text-align: center; z-index: 999; width: 400px !important; margin-left: auto; margin-right: auto;">
                      <img id="cache_image" :src="cache_image" />
                      <span slot="footer" class="dialog-footer" style="text-align: center;">
                        <el-button type="primary" @click="refresh_cache" style="width: 100%;">看不清? 换一张</el-button>
                      </span>
                    </el-dialog>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer class="footer position-absolute bottom-2 py-2 w-100">
          <div class="container">
            <div class="row align-items-center justify-content-lg-between">
              <div class="col-12 col-md-6 my-auto">
                <div class="copyright text-center text-sm text-white text-lg-start">
                  ©
                  <script>
                    document.write(new Date().getFullYear())
                  </script>,
                  made with <i class="fa fa-heart" aria-hidden="true"></i> by
                  <a href="" class="font-weight-bold text-white" target="_blank">Candyeel</a>
                  for a better web.
                </div>
              </div>
              <div class="col-12 col-md-6">
                <ul class="nav nav-footer justify-content-center justify-content-lg-end">
                  <li class="nav-item">
                    <a href="" class="nav-link text-white" target="_blank">Creative Tim</a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link text-white" target="_blank">About Us</a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link text-white" target="_blank">Blog</a>
                  </li>
                  <li class="nav-item">
                    <a href="" class="nav-link pe-0 text-white" target="_blank">License</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </main>
  </div>

  <!--   Core JS Files   -->
  <script src="/static/assets/js/core/popper.min.js"></script>
  <script src="/static/assets/js/core/bootstrap.min.js"></script>
  <script src="/static/assets/js/plugins/perfect-scrollbar.min.js"></script>
  <script src="/static/assets/js/plugins/smooth-scrollbar.min.js"></script>

  <script src="/static/assets/js/my/jquery.js"></script>
  <script src="/static/assets/js/my/vue.min.js"></script>
  <script src="/static/assets/js/my/vue-router.js"></script>
  <script src="/static/assets/js/my/ele.index.js"></script>
  <script src="/static/js/clickEmoji.js"></script>

  <script>
    var win = navigator.platform.indexOf('Win') > -1;
    if (win && document.querySelector('#sidenav-scrollbar')) {
      var options = {
        damping: '0.5'
      }
      Scrollbar.init(document.querySelector('#sidenav-scrollbar'), options);
    }
  </script>
  <!-- Github buttons -->
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
  <script src="/static/assets/js/material-dashboard.min.js?v=3.0.0"></script>
  <!-- vue绑定 -->
  <script>
    new Vue({
      el: '#app',
      data: {
        type_mode: ["success", "info", "warning", "danger", "success", "info", "danger", "warning"],
        cache: false,
        dialogVisible: false,
        mode: "login",
        clientHeight: '',
        activeIndex2: 2,
        circleUrl: "/static/image/default.jpg",
        isCollapse: false,  // 控制侧边栏是否关闭 false为不关闭
        visible: false,
        mouse_x: "",
        mouse_y: "",
        cache_x: "",
        cache_y: "",
        cache_status: false,
        cache_image: null,
        cache_uuid: "",
        cache_text: "",
        success_uuid: null,
        cache_mode: "2",
        err_no: localStorage.getItem('errno'),
        loading: false,
        label1: "",
        label2: "",
        email: localStorage.getItem("cache_email") ||  "",
        email_status: false,
        password: localStorage.getItem("cache_pwd") ||  "",
        password_status: false,
        titleList: [
          "你不知道的事",
          "永远发生在下一时刻",
          "美好即将发生"
        ],
        rememberMe: true,
      },
      created() {
        let self = this;
        document.addEventListener("click", function (e) {
          if (self.cache_status === true) {
            self.mouse_x = e.clientX;
            self.mouse_y = e.clientY;
            self.cache_click_position();
          }
        });
        this.inputCheck();
      },
      mounted() {
        this.loop_title();
        var timer = setInterval(
          function() {
            console.log(1);
            if (document.getElementsByClassName('v-modal')[0]){
              // clearInterval(timer)
              document.getElementsByClassName('v-modal')[0].style.cssText = "z-index: 0 !important;"
            }
          },
          300
        )
      },
      watch: {
      },
      methods: {
        inputCheck() {
          // console.log(this.email, this.password);
          let regexp_email = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
          let regexp_password = /^[a-zA-Z0-9_.@&]{6,20}$/;
          if (!regexp_email.test(this.email)) {
            this.email_status = false;
          } else {
            this.email_status = true;
          }
          if (!regexp_password.test(this.password)) {
            this.password_status = false;
          } else {
            this.password_status = true;
          }
        },
        go_back() {
          let refer = localStorage.getItem('refer');
          document.location.href = localStorage.getItem('refer') || '/pages/homePage.html';
        },
        open_cache(c) {
          this.loading = true;
          if (this.cache_image === null) {
            this.get_new_cache(1);
          } else {
            this.get_image_x_y_position();
          }
        },
        get_image_x_y_position() {
          let self = this;
          self.loading = true;
          setTimeout(function () {
            let box = document.getElementById("cache_image");
            let pos = box.getBoundingClientRect();
            self.cache_x = pos.left;
            self.cache_y = pos.top;
            self.cache_status = true;
            self.loading = false;
          }, 300)
        },
        refresh_cache(self) {
          this.get_new_cache(2);
        },
        get_new_cache(v) {
          if (this.err_no > 5) {
            this.cache_mode = "2"
          }
          this.loading = true;
          const url = `/apiUser/imageCache/?mode=${this.cache_mode}`;
          fetch(url, {
            method: 'GET',
            mode: 'cors',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$message({
                  message: json.message,
                  type: 'warning'
                })
                this.loading = false;
              } else {
                this.cache_image = `data:image/png;base64,${json.data.label1}`;
                this.cache_uuid = json.data.label2;
                this.label1 = json.data.label4;
                this.label2 = json.data.label5;
                this.cache_text = json.data.label3;
                this.get_image_x_y_position();
                this.loading = false;
              }
            })

        },
        cache_click_position() {
          if (this.mouse_x < this.cache_x || this.mouse_x > this.cache_x + this.label1 || this.mouse_y < this.cache_y || this.mouse_y > this.cache_y + this.label2) {
            this.$message({
              message: `请点击图片范围`,
              type: 'warning'
            });
            return
          }
          let x = parseInt(String(this.mouse_x - this.cache_x));
          let y = parseInt(String(this.mouse_y - this.cache_y));
          // 开始认证
          const url = `/apiUser/imageCache/?ck=${this.cache_uuid}&offset_x=${x}&offset_y=${y}`;
          fetch(url, {
            method: 'GET',
            mode: 'cors',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$message({
                  message: `${json.message} 请重新认证`,
                  type: 'warning'
                });
                this.get_new_cache(3);
              } else {

                let uuid_ = json.data.uuid;
                this.success_uuid = uuid_; //  以防再次验证
                this.dialogVisible = false;
                this.cache_status = false;
                this.true_login();
              }
            })
          // // 认证成功 携带参数登陆
          // console.log(`x: ${x} y: ${y}`)
        },
        handleClose() {
          this.cache_status = false;
          this.dialogVisible = false;
          let self = this;
          setTimeout(function () {
            let button = document.getElementById("login");
            button.disabled = false;
            button.style.backgroundColor = '#e91e63';
          }, 1000)
        },
        // 登录按钮
        mini_login() {
          if (! (this.email_status && this.password_status)) {
            this.$message({
              message: '输入的格式不合规 规则请参照字段说明或联系作者',
              type: 'warning'
            });
            return
          }
          const email = this.email;
          const password = this.password;
          if (this.success_uuid === null) {
            // 图片验证
            this.dialogVisible = true;
            this.open_cache(10);
          } else {
            this.true_login();
          }
          

        },
        true_login() {
          
          this.loading = true;
          const email = this.email;
          const password = this.password;
          if (this.rememberMe === true || this.rememberMe === "true") {
            localStorage.setItem('cache_email', email);
            localStorage.setItem('cache_pwd', password);
          }else{
            localStorage.removeItem('cache_email');
            localStorage.removeItem('cache_pwd');
          }
          const url = `/apiUser/userLogin/?uuid=${this.success_uuid}`;
          let regexp = /.*csrftoken=([^;.]*).*$/;
          let xCSRF = document.cookie.match(regexp) === null ? null : document.cookie.match(regexp)[1]
          fetch(url, {
            method: 'POST',
            mode: 'cors',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'X-CSRFToken': xCSRF
            },
            body: `email=${email}&password=${password}`,
          })
            .then(resp => resp.json())
            .then(json => {
              if (json.code !== 200) {
                this.$message({
                  message: json.message,
                  type: 'warning'
                });
                this.loading = false;
              } else {
                localStorage.setItem('token', '1');
                localStorage.setItem('avatar', json.data.avatar);
                localStorage.setItem('nick_name', json.data.nick_name);
                this.$message({
                  message: json.message,
                  type: 'success'
                });
                this.go_back();
              }
            })
        },
        loop_title() {
          let self = this;
          setInterval(function () {
            pop_title = self.titleList[0];
            self.titleList = self.titleList.slice(1).concat([pop_title]);
            document.getElementById("show_title").innerText = pop_title;
          }, 3000)
        }

      }
    })
  </script>
  <script src="https://myhkw.cn/api/player/1636018876119" id="myhk" key="1636018876119" m="1"></script>
</body>

</html>